<template>
  <view class="content">
    <view class="searchBox">
      <u-calendar :show="show" mode="range" @confirm="confirm" @close="show = false" :allowSameDay="true"
        :minDate="minDate" :closeOnClickOverlay="true" monthNum="13"></u-calendar>
      <view class="timeBox" @click="show = true">
        <span style="margin-right: 10rpx;">日期</span>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.start_date}}
        </view>
        <view style="margin: 0 10rpx;">
          至
        </view>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.end_date}}
        </view>
      </view>
      <view class="iptBox">
        <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
        <view class="searchBtn" @tap="getPlanList()">
          搜索
        </view>
      </view>
    </view>

    <view class="list">
      <view class="item" v-for="(i,k) in list" :key="k">
        <view class="itemHeader">
          <view class="">
            <span class="title">日期</span>
            <span>{{i.day_time}}[{{i.week}}]</span>
          </view>
          <view class="">
            <span class="title">店铺</span>
            <span>嗨词石家庄店-刘洋</span>
          </view>
        </view>
        <view class="itemContent" v-for="(item,index) in i.plan_data" :key="index">
          <view class="itemContentHeader">
            <view class="itemTime">
              {{item.start_time}}-{{item.end_time}}
            </view>
            <view class="name">
              {{item.plan_name}}

            </view>
            <view v-if="item.button_state== '1'" class="btn see" @tap="getPlanDetail(item)">查看</view>
            <view v-if="item.button_state== '2'" class="btn leave" @tap="leave(item)">请假</view>
            <view v-if="item.button_state== '3'" class="btn onLine" @tap="startPlan(item)">上课</view>
            <view v-if="item.button_state== '4'" class="btn feedback" @tap="feedback(item)">反馈</view>
          </view>
          <view class="userBox flex" v-for="(j,n) in item.teacher_plan_detail" :key="n" style="flex: 1;">
            <view class="userName">
              {{j.user.username}}
            </view>
            <view class="userPhone">
              {{j.user.phone}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 请假弹框 -->
    <u-popup :show="leaveShow" mode="center" round="20rpx" :overlay="false">
      <view class="leaveBox">
        <view class="leaveTitle">
          请假原因<span class="star">*</span>
        </view>
        <u--textarea v-model="leaveInfo.leave_reason" placeholder="请输入请假原因" placeholderStyle="color: red"></u--textarea>
        <view class="btns">
          <view class="cancel" @tap="cancel()">
            取消
          </view>
          <view class="confirm" @tap="leavePlan()">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 反馈弹框 -->
    <u-popup :show="feedbackShow" mode="center" round="20rpx" :overlay="false">
      <view class="leaveBox">
        <view class="leaveTitle">
          课后反馈<span class="star">*</span>
        </view>
        <u--textarea v-model="feedbackInfo.feedback" placeholder="请输入课后反馈内容"
          placeholderStyle="color: red"></u--textarea>
        <view class="btns">
          <view class="cancel" @tap="cancel()">
            取消
          </view>
          <view class="confirm" @tap="feedbackPlan()">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 演示说明弹框 -->
    <u-popup :show="demoShow" mode="center" round="20rpx" :overlay="false">
      <view class="leaveBox">
        <view class="leaveTitle">
          演示说明<span class="star">*</span>
        </view>
        <view class="website">
          网址:https://jingyan.baidu.com/1e5468f90.html
        </view>
        <view class="explain">
          复制后，按照下面链接说明进行操作演示。网址:https://jingyan.baidu.com/article/1e5468f901726f484961b71f.html
        </view>
        <view class="btns">
          <view class="cancel" @tap="cancel()">
            取消
          </view>
          <view class="confirm" @tap="copy()">
            复制
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 查看弹框 -->
    <u-popup :show="seeShow" mode="center" round="20rpx" :overlay="false">
      <view class="leaveBox">
        <view class="leaveTitle">
          查看课程<span class="star">*</span>
        </view>
        <view class="seeBox">
          <view class="form">
            <view class="item flex">
              <view class="label">
                课程名称:
              </view>
              <view class="text">
                {{seeInfo.plan_name}}
              </view>
            </view>
            <view class="item flex">
              <view class="label">
                课程时长:
              </view>
              <view class="text">
                <span v-if="seeInfo.plan_hour == 1">0.5h</span>
                <span v-if="seeInfo.plan_hour == 2">1h</span>
                <span v-if="seeInfo.plan_hour == 3">1.5h</span>
                <span v-if="seeInfo.plan_hour == 4">2h</span>
              </view>
            </view>
            <view class="item flex">
              <view class="label">
                排课类型:
              </view>
              <view class="text">
                <span v-if="seeInfo.plan_type == 1">正式课</span>
                <span v-if="seeInfo.plan_type == 2">体验课</span>
                <span v-if="seeInfo.plan_type == 3">复习课</span>
              </view>
            </view>
            <view class="item flex">
              <view class="label">
                课程状态:
              </view>
              <view class="text">
                <span v-if="seeInfo.plan_state == 0">教师请假</span>
                <span v-if="seeInfo.plan_state == 1">正常</span>
                <span v-if="seeInfo.plan_state == 2">上课中</span>
                <span v-if="seeInfo.plan_state == 3">课程结束</span>
              </view>
            </view>
            <view class="item flex" v-if="seeInfo.plan_state == 0 && seeInfo.leave_reason">
              <view class="label">
                请假原因:
              </view>
              <view class="text">
                {{seeInfo.leave_reason}}
              </view>
            </view>
            <view class="item flex" v-if="seeInfo.feedback">
              <view class="label">
                课后反馈:
              </view>
              <view class="text">
                {{seeInfo.feedback}}
              </view>
            </view>
            <view class="item flex">
              <view class="label">
                课程分类:
              </view>
              <view class="text">
                {{seeInfo.first_category}}-{{seeInfo.second_category}}
              </view>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="cancel" @tap="cancel()">
            取消
          </view>
          <view class="confirm" @tap="seeShow = false">
            确定
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        leaveShow: false, //请假弹框
        feedbackShow: false, //反馈弹框
        demoShow: false, //演示说明弹框
        seeShow: false, //查看反馈弹框
        info: {
          start_date: '',
          end_date: '',
          search_data: ''
        },
        value1: '',
        maxDate: '',
        minDate: '',
        list: [],
        feedbackInfo: {
          plan_sn: '',
          feedback: ''
        },
        leaveInfo: {
          plan_sn: '',
          leave_reason: ''
        },
        seeInfo: {}
      }
    },
    onLoad() {
      this.chooseTimed()
      this.getDate()
      this.getPlanList()
    },
    methods: {
      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        let minyear = year - 1;
        this.minDate = minyear + '-' + month + '-' + day;
        this.maxDate = year + '-' + month + '-' + day;
      },
      getDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = currentDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        this.info.start_date = formattedDate
        this.info.end_date = formattedDate
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "-");
        this.info.end_date = e[e.length - 1].replace(/-/g, "-");
        this.show = false
      },
      cancel() {
        this.leaveShow = false
        this.feedbackShow = false
        this.demoShow = false
        this.seeShow = false
      },
      async getPlanList() {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/getPlanList', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.list = res.data
      },
      feedback(item) {
        this.feedbackInfo.plan_sn = item.plan_sn
        this.feedbackShow = true
      },
      async feedbackPlan() {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/feedbackPlan', this.feedbackInfo)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.feedbackShow = false
        this.getPlanList()
      },
      leave(item) {
        this.leaveInfo.plan_sn = item.plan_sn
        this.leaveShow = true
      },
      async leavePlan() {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/leavePlan', this.leaveInfo)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.feedbackShow = false
        this.getPlanList()
      },
      async startPlan(item) {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/startPlan', {
          plan_sn: item.plan_sn
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.getPlanList()
      },
      async getPlanDetail(item) {
        const {
          data: res
        } = await uni.$http.post('teacher/plan/getPlanDetail', {
          plan_sn: item.plan_sn
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.seeInfo = res.data
        this.seeShow = true
      }
    }
  }
</script>

<style lang="scss">
  .content {
    .star {
      color: #D43030;
      margin-left: 11rpx;
    }

    .btns {
      color: #FFFFFF;
      text-align: center;
      line-height: 36rpx;
      font-size: 21rpx;
      margin-left: 293rpx;
      display: flex;

      view {
        width: 80rpx;
        height: 36rpx;
        border-radius: 8rpx;
      }

      .cancel {
        background: #A6A6A6;
        margin-right: 32rpx;
      }

      .confirm {
        background-color: #2A82E4;
      }
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;
        font-size: 21rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 520rpx;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
        }

        .iptPla {
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }

    .list {
      width: 698rpx;
      margin: 0 auto;
      margin-top: 20rpx;

      .item {
        margin-bottom: 15rpx;
        width: 698rpx;
        // height: 231rpx;
        border-radius: 10rpx;
        background: #FFFFFF;
        border: 2rpx solid #ECECEC;
        padding-top: 25rpx;
        color: #666;
        font-size: 24rpx;

        .itemHeader {
          padding-left: 26rpx;
          display: flex;

          >view {
            flex: 1;
          }

          .title {
            color: #333;
            margin-right: 10rpx;
          }
        }

        .itemContent {
          font-size: 21rpx;
          margin: 18rpx 30rpx 24rpx 39rpx;
          border-bottom: 1rpx solid #ECECEC;
          padding-bottom: 10rpx;


          .itemContentHeader {
            display: flex;
            margin-bottom: 10rpx;
          }

          .itemTime {
            width: 25%;
          }

          .name {
            width: 50%;
            margin: 0 33rpx;
            text-align: center;
          }

          .btn {
            width: 25%;
            font-size: 18rpx;
            width: 63rpx;
            height: 28rpx;
            border-radius: 8rpx;
            text-align: center;
            line-height: 28rpx;
            margin-left: auto;
            color: #FFFFFF;
          }

          .feedback {
            background: #FF8D1A;
          }

          .leave {
            background: #4E88E6;
          }

          .see {
            background: #A6A6A6;
          }

          .onLine {
            background: #FF5733;
          }

          .userBox {
            width: 75%;

            .userName {
              width: 50%;
            }

            .userPhone {
              width: 50%;
              text-align: center;
            }
          }
        }
      }

      .item .itemContent:last-of-type {
        border-bottom: none;
      }
    }

    .leaveBox {
      width: 560rpx;
      min-height: 430rpx;
      background: #FFFFFF;
      padding: 30rpx 37rpx;
      border: 2rpx solid #CCCCCC;
      border-radius: 20rpx;

      .website {
        width: 466rpx;
        height: 100rpx;
        font-size: 21rpx;
        margin: 10rpx auto 0;
        word-wrap: break-word;
      }

      .explain {
        width: 466rpx;
        height: 130rpx;
        font-size: 21rpx;
        margin: 0 auto 49rpx;
        word-wrap: break-word;
      }

      .seeBox {
        width: 466rpx;
        font-size: 21rpx;
        margin: 50rpx auto;
        word-wrap: break-word;

        .form {
          .item {
            margin-bottom: 10rpx;

            .label {
              min-width: 100rpx;
            }

            .text {
              color: #666;
              margin-left: 30rpx;
            }
          }
        }
      }



      .leaveTitle {
        font-size: 24rpx;
        color: #666666;
      }

      .u-textarea {
        width: 457rpx;
        height: 226rpx;
        opacity: 1;
        border-radius: 8rpx;
        border: 2rpx solid #ECECEC;
        margin: 18rpx auto 50rpx;
        font-size: 21rpx;
      }

    }
  }
</style>